<template>
	<div class="loginWrap">
		<div class="logo u-flex u-row-center">
			<img src="../assets/logo.png" />
		</div>
		<div class="type">账号密码登录</div>
		<div class="tips">欢迎使用小牛旅游</div>
		<div class="form">
			<div class="inputBox">
				<div class="label">手机号码</div>
				<input type="number" v-model="form.username" placeholder="请输入手机号码" />
			</div>
			<div class="inputBox">
				<div class="label">密码</div>
				<input type="password" v-model="form.password" placeholder="请输入密码" />
			</div>
		</div>
		<div class="u-flex u-row-between">
			<div class="u-flex">
        		<input style="width:20px;height: 20px;" type="checkbox" v-model="checkState" @change="checkboxChange" />
				<span class="tips">我已阅读并同意<span class="link">《用户隐私政策》</span></span>
			</div>
		</div>
		<div class="loginBtn">
			<mt-button :disabled="disabled" type="primary" @click="login">登录</mt-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        checkState: true,
				disabled: false,
				form: {
					username: '',
					password: ''
				}
      }
		},
		methods: {
			login() {
        if(this.form.username.length!=11) {
          this.$toast('请输入正确手机号码！');
        } else if(this.form.password.length==0) {
          this.$toast('请输入密码！');
        } else {
          this.$axios({
            url: this.$api.login,
            method: 'post',
            data: {
              username: this.form.username,
              password: this.form.password
            }
          }).then(res => {
            this.$store.commit('SET_TOKEN',res.token);
            this.$store.commit('SET_LOGIN',true);
            this.getUserInfo();
          })
        }
			},
      getUserInfo() {
        this.$axios({
          url: this.$api.userInfo,
          method: 'get'
        }).then(res => {
          this.$store.commit('SET_USERINFO',res.userInfo);
          this.$router.push({path: '/'});
        })
      },
			// 勾选版权协议
			checkboxChange() {
				if (this.disabled) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.u-flex{
  display: flex;
}
.u-row-between{
  justify-content: space-between;
}
.u-row-center{
  justify-content: center;
}
.loginWrap{
  min-height: 100vh;
  box-sizing: border-box;
  padding: 15px;
  background-color: #fff;
}
.loginBtn{
  width: 100%;
  margin-top: 25px;
  button{
    width: 100%;
  }
}
.inputBox{
  margin-top: 15px;
  text-align: left;
  .label{
    font-size: 16px;
    line-height: 40px;
  }
  input{
    width: 100%;
    font-size: 15px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px #c0c4cc solid;
    border-radius: 5px;
    &::placeholder{
      color: #c0c4cc;
    }
  }
}
.bottomLink{
  margin-top: 20px;
  color: #2979ff;
}
	.logo {
		img {
			margin-top: 20px;
			width: 140px;
			height: 140px;
		}
	}

	.type {
		font-size: 22px;
		margin-top: 40px;
		margin-bottom: 20px;
		color: #909399;
    text-align: left;
	}

	.tips {
		color: #909399;
		text-align: left;
		padding-left: 5px;
	}

	.link {
		color: #2979ff;
	}

	.form {
		margin-top: 20px;
    padding-bottom: 15px;
	}
</style>
